<script setup lang="ts">

import {useRouter} from "vue-router";
import {ref} from "vue";
const url=ref('/');
const router = useRouter();
const back=ref(-1);
function jump_push(){
  router.push(url.value);
}

function jump_replace(){
  router.replace(url.value);
}

function go_back(){
  router.go(back.value)
}





</script>

<template>
  <el-card header="编程式导航">
    <p>想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL</p>
    <p>replace 它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目</p>

    <pre v-highlight><code class="javascript">
  //导航到/home，产生一条历史记录
  router.go('/home')
  //导航到/user，替换原历史计录
  router.replace('/user');
  //根据历史记录回退
  router.go(-1)</code></pre>

      <el-space>
        <el-input v-model="url" style="width: 100px;height: 30px;" />
        <el-button type="primary" @click="jump_push">导航到不同的位置</el-button>
        <el-button type="success" @click="jump_replace">替换当前位置</el-button>
        <el-input v-model="back" style="width: 100px;height: 30px;" />
        <el-button type="warning" @click="go_back">回退</el-button>
      </el-space>


  </el-card>
</template>

<style scoped>

</style>